<template>
  		<div id="aa" @click="itemclick">
  			<div v-if="!isActive"><slot  name="aaimg"></slot></div>
  			<div v-else ><slot name="aaimg2"></slot></div>
  			<div :style="activeStyle"><slot name="aadiv"></slot></div>
  		</div>
</template>

<script>
	export default {
  name: 'Tabbaraa',
  props:{
  	path:String,//动态获取app.vue中的path
   activeColor:{
   	    type:String,
   	    default:"red"
   }
  },
  data(){
  	return{

  	}
  },
  	computed:{
  		isActive:function(){
					return this.$route.path.indexOf(this.path) !==-1//获取活跃样式true或false
				}	,
		activeStyle:function(){
			return this.isActive ?{color:this.activeColor}:{}//动态获取颜色
		}
  	},
  methods:{
  	itemclick(){
  		this.$router.replace(this.path)//跳转到指定url路径
  	}
  }
}
</script>

<style>
#aa{flex: 1;text-align:center;height: 49px;font-size: 14px;}
#aa img{height: 30px;width: 30px;vertical-align: middle;
  }

</style>
